I have problem with writing native functino that will copy my files from one directory to another and exclude some files and directories in process.
module.exports = function(grunt) {
grunt.initConfig({
//....
copy: {
prod: {
src: ["./src/*"],
dest: ["build/"]
}
}
}
}
Here is my custom Task Load:
grunt.loadNpmTasks('copy', function(){
var src = grunt.config.get('copy.src'),
dest = grunt.config.get('copy.dest'),
grunt.file.copy(src, dest);
});
I get this error in my console:
Warning: Task "copy" not found.
I though this is native grunt functionality regarging to:
http://gruntjs.com/api/grunt.file
Then my prod look like this:
grunt.registerTask("prod", ["concat", "uglify", "htmlmin", "imagemin", "copy"]);
I guess this is not a native grunt function after all. You can install "copy" and there is no need to write a custom Task Load function.
Install copy from:
npm install grunt-contrib-copy --save-dev
More about the plugin at:
https://github.com/gruntjs/grunt-contrib-copy
I reconfigured my Copy Task in the init to this:
copy: {
prod: {
files: [
{expand: true, src: ['./src/**'], dest: 'build/'}
]
}
}
And included
grunt.loadNpmTasks('grunt-contrib-copy');
That's all. It works now.
Related
I have Laravel project with React and Inertia in there.
When I run npm build dev, everything works fine.
When I run npm build prod, I see that there are problems with css.
Navigating to Sources, I see that app.css file is empty.
This is my first project I am building like this. It was created by another developer. Can you, please, point me out where to look at? I also add structure of my folders, not sure which file should I modify to fix that.
No css inside the file, just header
My webpax.mix.js file is like this:
const mix = require('laravel-mix');
const path = require('path');
mix
.js('resources/js/public.js', 'public/js')
.js('resources/js/app.js', 'public/js')
.react()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
'#': path.resolve('resources/js')
}
},
})
.version()
.sourceMaps();
My project structure
I have a large AngularJS/Express app where I'd like to begin sharing code between client and server, mainly small utility libraries, e.g:
// Name: utilities.js
module.exports.testUtilities = function () {
console.log('testUtilities: Hello world!');
};
I'm now trying to set up Browserify using grunt-browserify:
// Name: Gruntfile.js
browserify: {
client: {
src: ['crossplatform/**/*.js'],
dest: 'app/scripts/crossplatformBrowserify.js'
}
},
I successfully build a crossplatformBundle.js which I include in my index.html.
But I fail at accessing my Browserified code from the AngularJS client:
// Name: MyAngularController.js
var utilities = require('./utilities');
utilities.testUtilities();
Error message: require is undefined.
I see many Browserify questions where the answer is to bundle up ALL the client-side scripts, but I'd rather avoid that if I can, since I want separate JS files in development mode.
Thankful for any tips I can get!
The solution was to define a “standalone” bundle for Browserify:
browserify: {
client: {
src: ['crossplatform/**/*.js'],
dest: 'app/scripts/crossplatform.js',
options: {
browserifyOptions: {
standalone: 'crossplatform'
},
}
}
},
...which allows me to call the method with window.crossplatform.testUtilities() in the browser.
Update: see this thread for more examples of how to bundle multiple libraries/modules.
I am doing an front-end application using :
RequireJs
BackboneJs
Handlebars
To compile my template html to js for handlebars i used Grunt, and with those lines in the gruntfile.js
handlebars: {
compile: {
options: {
processName: function (fileName) {
return path.basename(fileName, '.handlebars');
},
namespace: "Handlebars.templates",
amd: true
},
files: {
'src/templates/compiled/example.js':'src/templates/raw/example.handlebars'
}
It work well, because in my example.js I have this first line :
define(['handlebars'], function(Handlebars) {
It seems like this line appear because of the amd: true, because if I remove, it does not work.
But the problem is, in Gulp how do I add this define on the compiled project ?
This link explains that.
Usage
1. Install development dependencies:
npm install --save-dev gulp-handlebars gulp-define-module
2. Add the require() statements and template task to your gulpfile
var gulp = require('gulp');
var defineModule = require('gulp-define-module');
var handlebars = require('gulp-handlebars');
gulp.task('templates', function() {
// Load templates from the templates/ folder relative to where gulp was executed
gulp.src('source/templates/**/*.hbs')
// Compile each Handlebars template source file to a template function
.pipe(handlebars())
// Define templates as AMD modules
.pipe(defineModule('amd'))
// Write the output into the templates folder
.pipe(gulp.dest('build/js/templates/'));
});
I'm trying to setup an angularjs project according to Johnpapa's Angular Style Guide whilst using TypeScript and Gulp as a build tool. I believe Gulp is currently recommended over Grunt but I'm not very experienced with Gulp.
What I have:
My project currently looks like this:
src/
+- ts/ # contains .ts source files
+- typings/ # contains .d.ts typing definitions
+- html/ # contains .html files
dist/
+- bundle.js # single .js file containing compiled typescript and sourcemaps
Following the angular style guide I have created a separate .ts file for each angular element.
my-app.module.ts
----------------
angular.module('myApp', []);
for initialization of the module and another for a simple implementation of a controller:
my-controller.controller.ts
----------------------------
export class MyController {
testString = 'test';
}
angular
.module('myApp')
.controller('MyController', MyController);
typescript is configured using a simple tsconfig.json. (Note that filesGlob is not active yet - it will become available from TypeScript 2.0)
tsconfig.json
-------------
{
"exclude" : [
"node_modules"
],
"filesGlob" : [
"./src/typings/index.d.ts",
"./src/ts/**/*.ts",
"!./node_modules/**/*.ts"
],
"compilerOptions": {
"noImplicitAny": true,
"target": "es5",
"sourceMap" : true,
"outFile" : "./dist/bundle.js",
"removeComments": false
}
}
What I want:
I would ideally like to
Have Gulp monitor new or updated .ts files in ./src/ts/**/*.ts
Concatenate all the files from ./src/ts/**/*.ts. This is required for angular to work properly. Other methods I've tried using requirejs or browserify can't find the other .ts files without having to manually input references to these files.
Compile using the definitions from tsconfig.json. This would take into consideration the typings in ./src/typings/index.d.ts (for external modules including 'angular'). Also sourcemaps.
Possibly an uglify or babelify step to finish it.
What I tried:
I've tried following the manual from the typescriptlang handbook but this uses browserify and won't work with angular.
Gulp-typescript also has a note on concatenating files but the out option doesn't work like this:
var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');
gulp.task('default', function () {
var tsResult = tsProject.src().pipe(ts(tsProject));
return tsResult.js.pipe(gulp.dest('dist'));
});
This configuration will output an empty file with only comments.
Another method mentioned in this question:
gulp.task('ts', function () {
gulp.src('./src/ts/**/*.ts')
.pipe(ts({
noImplicitAny: true,
out: 'output.js'
}))
.pipe(gulp.dest('./tmp/ts'));
});
gulp.task('default', ['ts'], function() {
gulp.src(['./tmp/ts/output.js'])
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write('/'))
.pipe(gulp.dest('./dist/'));
});
But this gave two issues: 1. Even though I only pointed at the .ts files in ./src/ts the typescript compiler started spewing errors from .ts in ./node_modules. 2. It still didn't manage to concatenate everything.
I'm at quite a loss here. Can anyone help me set up this build script? I'm surprised I couldn't find a similar working demo anywhere.
Solution:
I've configured the gulp environment based on the solution in this answer and removed the 'export' statement for classes / objects that are not inside a typescript module.
If that helps, here is a Angular Typescript Gulp Tutorial that has a basic TypeScript, Angular, Gulp, etc. setup that concatenate the app and the vendor/nodes files. There is the demo code on github.
/* File: gulpfile.js */
// grab our gulp packages
var gulp = require('gulp');
// Include plugins
var plugins = require("gulp-load-plugins")({
pattern: ['gulp-*', 'gulp.*', 'main-bower-files', 'del'],
replaceString: /\bgulp[\-.]/
});
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
// create a default task to build the app
gulp.task('default', ['jade', 'typescript', 'bowerjs', 'bowercss', 'appcss'], function() {
return plugins.util.log('App is built!')
});
In my example, we use Jade to HTML:
// Jade to HTML
gulp.task('jade', function() {
return gulp.src('src/**/*.jade')
.pipe(plugins.jade()) // pip to jade plugin
.pipe(gulp.dest('dist')) // tell gulp our output folder
.pipe(reload({stream: true}))
;
});
For TypeScript, we compiled into one single app.js file:
// TYPESCRIPT to JavaScript
gulp.task('typescript', function () {
return gulp.src('src/**/*.ts')
.pipe(plugins.typescript({
noImplicitAny: true,
out: 'app.js'
}))
.pipe(gulp.dest('dist/js/'))
.pipe(reload({stream: true}))
;
});
For bower, we merge all the js files in vendor.js and CSS in vendor.css:
// BOWER
gulp.task('bowerjs', function() {
gulp.src(plugins.mainBowerFiles())
.pipe(plugins.filter('**/*.js'))
.pipe(plugins.debug())
.pipe(plugins.concat('vendor.js'))
.pipe(plugins.uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.task('bowercss', function() {
gulp.src(plugins.mainBowerFiles())
.pipe(plugins.filter('**/*.css'))
.pipe(plugins.debug())
.pipe(plugins.concat('vendor.css'))
.pipe(gulp.dest('dist/css'));
});
Custom CSS:
// APP css
gulp.task('appcss', function () {
return gulp.src('src/css/**/*.css')
.pipe(gulp.dest('dist/css/'))
.pipe(reload({
stream: true
}));
});
// CLEAN
gulp.task('clean', function(done) {
var delconfig = [].concat(
'dist',
'.tmp/js'
);
// force: clean files outside current directory
plugins.del(delconfig, {
force: true
}, done);
});
This is what reloads the browser when changes occur:
// Watch scss AND html files, doing different things with each.
gulp.task('serve', ['default'], function () {
// Serve files from the root of this project
browserSync.init({
server: {
baseDir: "./dist/"
}
});
gulp.watch("src/**/*.jade", ['jade']).on("change", reload);
gulp.watch("src/**/*.ts", ['typescript']).on("change", reload);
gulp.watch("src/**/*.css", ['appcss']).on("change", reload);
});
My tsconfig.json looks like this... I put the JS files that are automatically compiled from the text editor (Atom) into .tmp/js/atom ... some people put the .js in the same directory as the .ts but I find it confusing... less files is better for me:
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"outDir": ".tmp/js/atom"
},
"exclude": [
"node_modules",
"typings"
]
}
With a Build configuration as below, Why am i seeing all the files in source directory + minified application file when i run the deploy command specified below. I only need a single js file that will kickoff my backbone application
Build Config
({
appDir: "../",
baseUrl: 'Comment',
dir: './deploy',
optimize: 'uglify',
paths: {
text: '../../amd/plugins/text',
CommentView: 'views/feedback',
Feedback: 'models/feedback',
templates: 'templates'
},
modules: [
{
name: "app"
}
]
})
App.js
require.config({
urlArgs: "bust=" + (new Date()).getTime(),
baseUrl: 'scripts/apps/feedback',
paths: {
text: '../../amd/plugins/text',
CommentView: 'views/feedback',
Feedback: 'models/feedback',
templates: 'templates'
}
});
require(["Feedback", "CommentView"], function (feedbackModel, commentView) {
});
Optimization Command
node amd/plugins/r.js -o apps/feedback/build.config.js
By default, the requirejs optimizer does not remove modules from the output. Check the contents of your built app.js, I would guess that it has all of your modules in it. The individual modules shouldn't cause any problems and won't be used, but if you really went to get rid of them, try setting removeCombined: true in your build config.